<template>
    <addEditSubjectAliasView ref="addEditSubjectAliasView" />
    <div class="app-table">
        <div class="app-body">
            <div class="app-search">
                <el-form :inline="true" class="demo-form-inline" v-model="form">
                    <el-form-item label="学科别名" style="width:200px">
                        <el-input placeholder="请输入别名" v-model="form.subjectAliasName"></el-input>
                    </el-form-item>
                    <el-form-item label="所属学科" prop="gradeId" style="width:200px">
                        <el-select clearable v-model="form.subjectId" autocomplete="off" placeholder="请选择学科">
                            <el-option v-for="item in subjectList" :key="item.departmentId" :value="item.departmentId"
                                :label="item.departmentName"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit" @keyup.enter="searchEnter">搜索</el-button>
                        <el-button type="success" @click="add">添加别名</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <el-table size="small" :data="list" border :row-class-name="tableRowClassName">
                <el-table-column prop="id" label="序号" />
                <el-table-column prop="aliasName" label="学科别名" />
                <el-table-column prop="subjectName" label="所属学科" />
                <el-table-column prop="submitTime" #empty="" label="添加时间" />
                <el-table-column prop="submitter" empty-text="" label="操作人员" />
                <el-table-column label="操作">
                    <template style="display: block" #default="scope">
                        <el-button size="small" type="success" @click="editSubjectAlias(scope.row)">修改别名
                        </el-button>
                        <el-button size="small" type="danger" @click="deleteSubjectAlias(scope.row.aliasId)">删除别名
                        </el-button>
                    </template>
                </el-table-column>
                <template v-slot:empty>
                    <el-empty description="暂无数据"></el-empty>
                </template>
            </el-table>
            <div style="margin-top: 10px">
                <el-config-provider :locale="locale">
                    <el-pagination :total="total" :page-size="limit" :current-page="page"
                        :page-sizes="[5, 10, 20, 30, 40, 50, 100]" layout="total, sizes, prev, pager, next, jumper"
                        @size-change="changePageSize" @current-change="changeCurrentPage">
                    </el-pagination>
                </el-config-provider>
            </div>
        </div>
        <bottomView></bottomView>
    </div>
</template>
<script>
import addEditSubjectAliasView from '../../components/schedule/addEditSubjectAlias';
import { ElConfigProvider, ElMessageBox, ElMessage } from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { httpService } from "@/utils/httpService";
import bottomView from "@/components/bottom.vue";

export default {
    name: "subjectAliasListView",
    data() {
        return {
            type: 0,
            title: "",
            list: [],
            page: 1,
            total: 0,
            limit: 10,
            subjectList: "",
            form: {
                subjectAliasName: "",
                subjectName: "",
                subjectId: ""
            },
        };
    },
    components: {
        addEditSubjectAliasView,
        ElConfigProvider,
        ElMessageBox,
        bottomView,
        ElMessage
    },
    setup() {
        return {
            locale: zhCn,
        };
    },
    mounted() {
        this.getSubjectAliasList();
        this.getSubjectList()
    },
    methods: {
        searchEnter: function (e) {
            // 使用 which 和 keyCode 属性来解决兼容问题
            var keyCode = window.event ? e.keyCode : e.which;
            var val = e.target.value;
            if (keyCode == 13 && val) {
                this.page = 1;
                this.getSubjectAliasList();
            }
        },
        onSubmit() {
            this.page = 1;
            this.getSubjectAliasList();
        },
        add() {
            this.$refs.addEditSubjectAliasView.title = '添加学科';
            this.$refs.addEditSubjectAliasView.subjectList = this.subjectList;
            this.$refs.addEditSubjectAliasView.dialogFormVisible = true
        },
        editSubjectAlias(row) {
            this.$refs.addEditSubjectAliasView.title = '修改学科信息';
            this.$refs.addEditSubjectAliasView.dialogFormVisible = true;
            this.$refs.addEditSubjectAliasView.subjectList = this.subjectList;
            this.$refs.addEditSubjectAliasView.subjectAliasForm.subjectId = row.subjectId;
            this.$refs.addEditSubjectAliasView.subjectAliasForm.subjectAliasName = row.aliasName;
            this.$refs.addEditSubjectAliasView.subjectAliasForm.aliasId = row.aliasId;
        },
        deleteSubjectAlias(aliasId) {
            ElMessageBox.confirm("你确定要删除该学科别名吗？", "提醒", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    httpService("/pythonApi/scheduleApi/deleteSubjectAlias", "aliasId=" + aliasId, "post").then(
                        (data) => {
                            if (data.code == 200) {
                                ElMessage.success(data.message);
                                this.getSubjectAliasList();
                            } else {
                                ElMessage.error(data.message);
                            }
                        }
                    );
                })
                .catch(() => {
                });
        },
        changePageSize(size) {
            this.limit = size;
            this.getSubjectAliasList();
        },

        // 改变页码，page：回调参数，表示当前选中的“页码”
        changeCurrentPage(page) {
            this.page = page;
            this.getSubjectAliasList();
        },
        getSubjectList() {
            httpService(
                "/pythonApi/attendanceApi/getDepartmentList",
                {
                    departmentType: 3
                },
                "get"
            ).then((data) => {
                this.subjectList = data.data;
            });
        },
        getSubjectAliasList() {
            httpService(
                "/pythonApi/scheduleApi/getSubjectAliasList",
                {
                    page: this.page,
                    limit: this.limit,
                    subjectId: this.form.subjectId ? this.form.subjectId : "",
                    subjectAliasName: this.form.subjectAliasName
                },
                "get"
            ).then((data) => {
                this.list = data.data;
                this.total = data.total;
                this.pageCount = data.pages;
            });
        },
    },
};
</script>
<style scoped>
.app-table {
    background: #eff3f5;
    padding: 10px;
    width: calc(100vw - 190px);
}

.app-search {}


.app-body {
    background: white;
    padding: 20px 20px 10px 20px;
    margin-bottom: 10px;
    min-height: calc(100vh - 243px);
}
</style>
